<template>
  <view class="container">
    <view class="tips-card">
      <text class="tip">配置操作说明</text>
      <text class="tip">1、设置执行条件、启用后根据实时数据触发执行。</text>
      <text class="tip">2、数值范围建议：最小值≥0.00，最大值≤100.00。</text>
      <text class="tip">3、执行数据来源支持：模拟量-AI1、模拟量-AI2。</text>
      <text class="tip">4、比较方式支持：大于、小于；阈值支持小数。</text>
      <text class="tip">5、禁用规则：模拟量输入≤0.00时，按0处理。</text>
    </view>

    <view v-for="(ch, cIdx) in channels" :key="cIdx">
      <view class="auto-card" v-for="(cfg, fIdx) in ch.configs" :key="fIdx">
      <view class="card-header">
        <text class="card-title">第{{ cIdx + 1 }}路开关自动化配置{{ fIdx + 1 }}</text>
        <text class="card-sub">禁用：模拟量输入≤0.00，则按0处理</text>
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title"
            >自动化功能：{{ cfg.enabled ? "启用" : "禁用" }}</text
          >
        </view>
        <u-switch v-model="cfg.enabled" activeColor="#60a4f7" />
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title">执行动作</text>
        </view>
        <view class="row-right">
          <u-subsection
            :list="actionOptions"
            :current="cfg.actionIndex"
            @change="changeAction(cIdx, fIdx, $event)"
          />
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title">执行动作</text>
        </view>
        <view class="row-right">
          <u-subsection
            :list="sourceOptions"
            :current="cfg.sourceIndex"
            @change="changeSource(cIdx, fIdx, $event)"
          />
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title">执行动作</text>
        </view>
        <view class="row-right">
          <u-subsection
            :list="compareOptions"
            :current="cfg.compareIndex"
            @change="changeCompare(cIdx, fIdx, $event)"
          />
        </view>
      </view>

      <view class="threshold">
        <u-input v-model="cfg.threshold" type="digit" placeholder="0.00" />
        <view class="edit" @click="openEdit(cIdx, fIdx)">
          <u-icon name="edit-pen" size="20" color="#60a4f7" />
        </view>
      </view>
      </view>
    </view>

    <u-popup :show="popup.show" mode="center" @close="cancelEdit">
      <view class="popup">
        <text class="popup-title">请输入阈值</text>
        <u-input v-model="popup.value" type="number" placeholder="例如 0.00" />
        <view class="popup-actions">
          <u-button size="small" type="default" @click="cancelEdit"
            >取消</u-button
          >
          <u-button size="small" type="primary" @click="confirmEdit"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actionOptions: [{ name: "关闭" }, { name: "打开" }],
      sourceOptions: [{ name: "模拟量-AI1" }, { name: "模拟量-AI2" }],
      compareOptions: [{ name: "大于" }, { name: "小于" }],
      channels: [
        { configs: [ { enabled: true, actionIndex: 1, sourceIndex: 0, compareIndex: 0, threshold: "0.00" }, { enabled: true, actionIndex: 1, sourceIndex: 0, compareIndex: 0, threshold: "0.00" } ] },
        { configs: [ { enabled: true, actionIndex: 1, sourceIndex: 0, compareIndex: 0, threshold: "0.00" }, { enabled: true, actionIndex: 1, sourceIndex: 0, compareIndex: 0, threshold: "0.00" } ] },
        { configs: [ { enabled: false, actionIndex: 0, sourceIndex: 1, compareIndex: 1, threshold: "0.00" }, { enabled: false, actionIndex: 0, sourceIndex: 1, compareIndex: 1, threshold: "0.00" } ] },
        { configs: [ { enabled: false, actionIndex: 0, sourceIndex: 1, compareIndex: 1, threshold: "0.00" }, { enabled: false, actionIndex: 0, sourceIndex: 1, compareIndex: 1, threshold: "0.00" } ] },
      ],
      popup: { show: false, cIndex: -1, fIndex: -1, value: "" },
    };
  },
  methods: {
    changeAction(cIndex, fIndex, idx) {
      this.channels[cIndex].configs[fIndex].actionIndex = idx;
    },
    changeSource(cIndex, fIndex, idx) {
      this.channels[cIndex].configs[fIndex].sourceIndex = idx;
    },
    changeCompare(cIndex, fIndex, idx) {
      this.channels[cIndex].configs[fIndex].compareIndex = idx;
    },
    openEdit(cIndex, fIndex) {
      this.popup = {
        show: true,
        cIndex,
        fIndex,
        value: String(this.channels[cIndex].configs[fIndex].threshold),
      };
    },
    confirmEdit() {
      const v = String(this.popup.value || "0.00");
      if (this.popup.cIndex >= 0 && this.popup.fIndex >= 0) this.channels[this.popup.cIndex].configs[this.popup.fIndex].threshold = v;
      this.popup.show = false;
    },
    cancelEdit() {
      this.popup.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  height: 100%;
  background: #f6f7fb;
  padding: 16rpx 30rpx 30rpx;
}
.tips-card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.tip {
  display: block;
  color: #5f6169;
  font-size: 22rpx;
  line-height: 1.6;
}
.auto-card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  margin-top: 16rpx;
}
.card-header {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.card-title {
  font-size: 28rpx;
  color: #1e1f23;
}
.card-sub {
  font-size: 22rpx;
  color: #8b8d93;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
}
.row-left {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.row-title {
  font-size: 26rpx;
  color: #1e1f23;
}
.row-right {
  // display: flex;
  // align-items: center;
  width: 300rpx;
}
.threshold {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 10rpx;
}
.edit {
  width: 60rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #e6e8f0;
  border-radius: 8rpx;
}
.popup {
  width: 540rpx;
  background: #ffffff;
  padding: 16rpx;
  border-radius: 12rpx;
}
.popup-title {
  font-size: 28rpx;
  color: #1e1f23;
  margin-bottom: 10rpx;
}
.popup-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12rpx;
  margin-top: 16rpx;
}
</style>
